<template>
  <div class="search">
    <form @submit.prevent="searching">
      <div>
        <input
          v-model="keywords"
          type="text"
          placeholder="搜索"
          @input="inputing"
        />
        <span @click="componentName = 'HotSearch'">返回</span>
      </div>
    </form>
    <component
      :is="componentName"
      :historyArr="historyArr"
      :keywords="keywords"
      @play="$emit('play', $event)"
      @search="searchChange"
    ></component>
  </div>
</template>

<script>
import HotSearch from "@/components/HotSearch";
import SearchSuggest from "@/components/SearchSuggest";
import SearchResult from "@/components/SearchResult";

export default {
  name: "Search",
  data() {
    return {
      componentName: "HotSearch",
      keywords: "",
      historyArr: [],
    };
  },

  components: {
    HotSearch,
    SearchSuggest,
    SearchResult,
  },
  methods: {
    inputing(e) {
      if (e.target.value == "" || e.target.value == "") {
        this.componentName = "HotSearch";
      } else {
        this.keywords = e.target.value;
        this.componentName = "SearchSuggest";
      }
    },
    searching(e) {
      this.componentName = "SearchResult";
      this.historyArr.push(e.target[0].value);
    },
    searchChange(e) {
      this.keywords = e;
      this.componentName = "SearchResult";
      this.historyArr.push(this.keywords);
    },
  },
};
</script>
<style lang="less" scoped>
.search {
  padding-top: 15px;
  form {
    padding: 10px;
    background-color: #8ac4d0;
    div {
      display: flex;
      padding-left: 15px;
      height: 30px;
      border-radius: 8px;
      background-color: #ebecec;
      align-items: center;
      // float: left;
      input {
        flex: 1;
        height: 30px;
        border: none;
        outline: none;
        background: transparent;
      }
    }
    span {
      display: inline-block;
      width: 40px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      background-color: #8ac4d0;
      color: white;
    }
  }
}
</style>